import React from 'react';
import './index.scss'
import Echarts from '../../component/examplis/examplis';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';

// 本周详情 左边
interface DataTypeLeft {
  date: string;
  person: number;
  key: string;
}
const columnsLeft: ColumnsType<DataTypeLeft> = [
  {
    title: '日期',
    dataIndex: 'date',
    key: 'dateID',
    width: "160px"
  },
  {
    title: '人数',
    dataIndex: 'person',
    key: 'person',
    width: "160px"
  },
];
const dataLeft: DataTypeLeft[] = [
  {
    date: '2022-06-01',
    person: 32,
    key: "1"
  }
];
// 本周详情 右边
interface DataTypeRigth {
  date: string;
  person: number;
  type: string
  key: string;
}
const columnsRight: ColumnsType<DataTypeRigth> = [
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
    width: "160px"
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    width: "160px"
  },
  {
    title: '人数',
    dataIndex: 'person',
    key: 'person',
    width: "160px"
  },
];
const dataRight: DataTypeRigth[] = [
  {
    date: '2022-06-01',
    person: 11,
    type: "外来",
    key: "1"
  },
  {
    date: '2022-06-01',
    person: 12,
    type: "学生",
    key: "2"
  },
  {
    date: '2022-06-01',
    person: 14,
    type: "老师",
    key: "3"
  }
];


const homePage: React.FC = () => {
  return (
    <>
      <div className='show'>
        {/* {上} */}
        <div className='topq'>
          <div className='box'>
            <div className='box_left' style={{ backgroundColor: "#54adeb" }}>
              <div className='title'>今日访客</div>
              <div className='fonts'>20</div>
            </div>
            <div className='box_right'>
              <div className='box_right_top'>待审核：20人</div>
              <div className='box_right_bottom'>未通过：20 人 已取消：1 人</div>
            </div>
          </div>
          <div className='box'>
            <div className='box_left' style={{ backgroundColor: "#fa5822" }}>
              <div className='title'>昨日访客</div>
              <div className='fonts'>20</div>
            </div>
            <div className='box_right'>
              <div className='box_right_top'>待审核：20人</div>
              <div className='box_right_bottom'>未通过：20 人 已取消：1 人</div>
            </div>
          </div><div className='box'>
            <div className='box_left' style={{ backgroundColor: "#009789" }}>
              <div className='title'>最近七天</div>
              <div className='fonts'>20</div>
            </div>
            <div className='box_right'>
              <div className='box_right_top'>待审核：20人</div>
              <div className='box_right_bottom'>未通过：20 人 已取消：1 人</div>
            </div>
          </div><div className='box'>
            <div className='box_left' style={{ backgroundColor: "#f7b824" }}>
              <div className='title'>近三十天</div>
              <div className='fonts'>20</div>
            </div>
            <div className='box_right'>
              <div className='box_right_top'>待审核：20人</div>
              <div className='box_right_bottom'>未通过：20 人 已取消：1 人</div>
            </div>
          </div><div className='box'>
            <div className='box_left' style={{ backgroundColor: "#304156" }}>
              <div className='title'>最近一年</div>
              <div className='fonts'>20</div>
            </div>
            <div className='box_right'>
              <div className='box_right_top'>待审核：20人</div>
              <div className='box_right_bottom'>未通过：20 人 已取消：1 人</div>
            </div>
          </div>
        </div>
        {/* {中} */}
        <div className='create'>
          <Echarts examplis={'examplis'}></Echarts>
        </div>
        {/* {下} */}
        <div className='bottom'>
          <div className='show_bottom_title'>
            <span>本周详情</span>
          </div>
          <div className='show_bottom_data'>
            <div className='show_bottom_data_left'>
              <span>本周人员统计表：</span>
              <Table bordered={true} columns={columnsLeft} dataSource={dataLeft} pagination={false} />
            </div>
            <div className='show_bottom_data_right'>
              <span>本周人员申请类型表：</span>
              <Table bordered={true} columns={columnsRight} dataSource={dataRight} pagination={false} />
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default homePage